<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="用户姓名">
            <span>{{ props.row.uName }}</span>
          </el-form-item>
          <el-form-item label="用户昵称">
            <span>{{ props.row.uNickname }}</span>
          </el-form-item>
          <el-form-item label="用户账号">
            <span>{{ props.row.uAccount }}</span>
          </el-form-item>
          <el-form-item label="用户电话">
            <span>{{ props.row.uTel }}</span>
          </el-form-item>
          <el-form-item label="余额">
            <span>{{ props.row.uBalance }}</span>
          </el-form-item>
          <el-form-item label="积分">
            <span>{{ props.row.uIntegral }}</span>
          </el-form-item>
          <el-form-item label="邮箱">
            <span>{{ props.row.uEmail }}</span>
          </el-form-item>
          <el-form-item label="详细住址">
            <span>{{ props.row.uAddress }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label="用户ID"
      prop="uId">
    </el-table-column>
    <el-table-column
      label="用户姓名"
      prop="uName">
    </el-table-column>
    <el-table-column
      label="用户状态"
      prop="uState">
      <template slot-scope="scope">
              <p v-if="tableData[scope.$index].uState==1">管理员</p>
              <p v-if="tableData[scope.$index].uState==2">用户</p>
              <p v-if="tableData[scope.$index].uState==3">冻结</p>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
          <el-button type="danger" round @click="changeState(3,scope.row)">冻结</el-button>
          <el-button type="primary" round @click="changeState(2,scope.row)">解冻</el-button>
          <el-button type="success" round @click="showCar(scope.row)">车辆</el-button>
            <el-dialog title="车辆信息" :visible.sync="dialogTableVisible">
              <el-table :data="cars">
                <el-table-column prop="cId" label="车辆ID"></el-table-column>
                <el-table-column prop="cCard" label="车牌号"></el-table-column>
                <el-table-column prop="cSize" label="车辆种类"></el-table-column>
                <el-table-column prop="cState" label="车辆状态"></el-table-column>
              </el-table>
            </el-dialog>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  
  
  
  data() {
    return {
      tableData: [
        {
          uId:"",
          uAccount:"",
          uNickname:"",
          uName:"",
          uCardid:"",
          uTel:"",
          uBalance:"",
          uIntegral:"",
          uEmail:"",
          uAddress:"",
          uState:"",
        }
      ],
      cars:[],
      dialogTableVisible: false,
    };
  },
  methods: {
    //修改状态
    changeState(uState,row){
      if(row.uState==1){
              this.$message.error("不能操作管理员!");
                return;
      }
      this.$axios.post("/user/update",{uState:uState,uId:row.uId})
        .then(resp=>{
          if(resp.data.code==200){
                this.refresh();
          }
      });     
    },
    //展示车辆信息
    showCar(row){
        this.dialogTableVisible = true;
        let uId=row.uId;
        let config={
          headers:{
            "Content-Type":"text/plain"
          }
        }
        this.$axios.post("user/findOne",uId,config)
        .then(resp=>{
              this.cars=resp.data.data.cars;
        });
    },

    //刷新方法
    refresh(){
        let r=JSON.parse(sessionStorage.getItem("u"));
      this.$axios.post("/user/findAll")
       .then(resp=>{
          this.tableData=resp.data.data;
      });
    }
  },
  mounted(){
    this.refresh();
  },
};
</script>

<style>
 .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>